<template>
    <div class="mask">
        <transition name="message-fade">
            <div class="r-message-box" v-if="visible">
            <div class="r-message-box__header">
               {{title}}
            </div>
            <div class="r-message-box__content">
               {{contend}}
            </div>
            <div class="r-message-box__footer">
                <w-button type='primary' @click="confrimHandle">确定</w-button>
                <w-button type='primary' @click="cancelHandle">取消</w-button>
            </div>
        </div>
        </transition>

    </div>
</template>

<script>
export default {
    name: 'WUiIndex',
    props:{
        visible:{
            type:Boolean,
            default:false
        },
         title:{
             type:String,
             default:'温馨提示'
         },
        contend:{
             type:String,
             default:'温馨提示'
         },
         onOk:{
             type:Function
         },
         onCancel:{
             type:Function
         }
    },
    data() {
        return {
            
        };
    },

    mounted() {
       this.createElement() 
    },

    methods: {
        createElement(){
            this.visible=true;
            document.body.appendChild(this.$el)
        },
        confrimHandle(){
            this.onOk()
            this.close()
        },
        cancelHandle(){
            this.onCancel();
            this.close()

        },
        close(){
            this.visible=false
        },
        destroyElement(){
            this.$destroy();
        }
    },
    beforeDestroy(){
        this.$el.parentNode.removeChild(this.$el)
    },
    watch:{
        visible(newValue){
            if(!newValue){
                this.$el.addEventListener(
                    'transitionend',this.destroyElement
                )
            }
        }
    }
};
</script>

<style scoped>
@import './message-box.css'
</style>